<script>
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

export default defineComponent({
  name: 'Demo',
  components: {
    VScaleScreen,
    Vue3SeamlessScroll
  }
})
</script>
<script setup>

import { ref, computed, getCurrentInstance, nextTick } from 'vue';
import { onMounted } from 'vue';
const { proxy } = getCurrentInstance()
const value5 = ref('')

const periodDataList = ref([
  {
    dateTime: "56",
    startTime: "长沙抽样调查长沙抽样调查1",
    endTime: "2022-05-03",
    shouldArriveNumber: "1",
    actualAttendance: "100",
    bl: "10%"
  },
  {
    dateTime: "57",
    startTime: "长沙抽样调查长沙抽样调查2",
    endTime: "2022-05-03",
    shouldArriveNumber: "2",
    actualAttendance: "200",
    bl: "10%"
  },
  {
    dateTime: "58",
    startTime: "长沙抽样调查长沙抽样调查3",
    endTime: "2022-05-03",
    shouldArriveNumber: "3",
    actualAttendance: "300",
    bl: "10%"
  },
  {
    dateTime: "59",
    startTime: "长沙抽样调查长沙抽样调查4",
    endTime: "2022-05-03",
    shouldArriveNumber: "4",
    actualAttendance: "400",
    bl: "10%"
  },
  {
    dateTime: "60",
    startTime: "长沙抽样调查长沙抽样调查5",
    endTime: "2022-05-03",
    shouldArriveNumber: "5",
    actualAttendance: "500",
    bl: "10%"
  },
  {
    dateTime: "51",
    startTime: "长沙抽样调查长沙抽样调查6",
    endTime: "2022-05-03",
    shouldArriveNumber: "6",
    actualAttendance: "600",
    bl: "10%"
  },
  {
    dateTime: "561",
    startTime: "长沙抽样调查长沙抽样调查7",
    endTime: "2022-05-03",
    shouldArriveNumber: "7",
    actualAttendance: "700",
    bl: "10%"
  },
  {
    dateTime: "223",
    startTime: "长沙抽样调查长沙抽样调查8",
    endTime: "2022-05-03",
    shouldArriveNumber: "8",
    actualAttendance: "800",
    bl: "10%"
  }
]);


//模拟数据value的字段对应Y轴，name字段对应X轴
const data = ref([
  { value: 11, name: 'A' },
  { value: 31, name: 'B' },
  { value: 75, name: 'C' },
  { value: 25, name: 'D' },
  { value: 16, name: 'E' },
])

const option = computed(() => {
  return {

    title: [{
      text: '50',
      textStyle: {
        color: '#44EBEA',
        fontSize: 24,
        fontWeight: 400,
        fontFamily: 'DingTalk-JinBuTi'
      },
      itemGap: 20,
      left: '16%',
      top: '35%'
    },
    {
      text: '%',
      textStyle: {
        color: '#44EBEA',
        fontSize: 16,
        fontWeight: 400,
        fontFamily: 'DingTalk-JinBuTi'
      },
      itemGap: 20,
      left: '54%',
      top: '42%'
    }
    ],

    angleAxis: {
      polarIndex: 0,
      min: 0,
      max: 100,
      show: false,
      // boundaryGap: ['40%', '40%'],
      startAngle: 90,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,

      },
      axisTick: {
        show: false
      },
    },
    polar: [{
      center: ['50%', '50%'], //中心点位置
      radius: '190%' //图形大小
    }],
    series: [{
      type: 'bar',
      z: 10,
      name: "完成度",
      data: [50],
      showBackground: false,
      backgroundStyle: {
        borderWidth: 10,
        width: 10
      },
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: 5, //大的占比环
      itemStyle: {
        normal: {
          opacity: 1,
          //   color: "#14d88e",
          color: { // 圆环的颜色
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#3384F6', // 0% 处的颜色
            },
            {
              offset: 0.4,
              color: '#3382F6', // 100% 处的颜色
            },
            {
              offset: 1,
              color: '#40D3ED', // 100% 处的颜色
            }
            ]
          },
        }
      },
    },



    ]
  };
})


const option1 = computed(() => {
  return {
    title: {
      //  		text: '单位：(万元)',
      textStyle: {
        color: 'rgba(131, 162, 192, 1)',
        fontSize: 12,
      },
      top: '4%',
      left: '2%',
    },
    tooltip: {
      trigger: 'axis',
      color: "black",
      backgroundColor: "rgba(0,0,0,0.5)",
      borderWidth: "1", //边框宽度设置1
      borderColor: "rgba(0,0,0,0)", //设置边框颜色
      formatter: function (params) {
        var res = // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
          "<div style='margin-bottom:5px;width:100%;color:#fff;font-family:DingTalk-JinBuTi'>" +
          params[0].axisValue +
          "</div>";
        for (var i = 0; i < params.length; i++) {
          //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
          res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px;font-family:DingTalk-JinBuTi">
                  <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${[
              params[i].borderColor, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
            ]};"></span>
                  ${params[i].seriesName}
                  ${params[i].data}万元
                </div>`;
        }
        return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
      },
    },
    legend: {
      data: ['市场部', '政企部'],
      icon: 'rich',
      show: true,
      itemWidth: 16,
      itemHeight: 2,
      textStyle: {
        color: '#999999',
        fontSize: '14px',
        fontFamily: 'DingTalk-JinBuTi',
      },
      top: 8,
      right: 10,
      itemGap: 34,
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '10%',
      top: '16%',
      containLabel: true,
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      type: 'category',
      boundaryGap: false,
      axisLine: {
        symbol: 'none',
        lineStyle: {
          color: '#545A5E',
          type: 'dashed',
          width: '1'
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#545A5E',
          type: 'dashed',
        },
      },

      axisLabel: {
        interval: 0,
        color: '#6E7079',
        fontSize: 12,
        padding: [10, 0, 0, 0],
        textStyle: {
          fontFamily: 'DingTalk-JinBuTi',
        }
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#6E7079',
        fontSize: 12,
        padding: [0, 10, 0, 0],
        textStyle: {
          fontFamily: 'DingTalk-JinBuTi',
        },
        formatter: function (value, index) {
          return value + '万元';
        },
      },
      splitLine: {
        lineStyle: {
          color: '#545A5E',
          type: 'dashed',
        },
      },
    },
    series: [{
      name: '市场部',
      type: 'line',
      data: [10, 20, 30, 40, 10, 20, 30, 40, 10, 20, 30, 40],
      color: '#0047F5',
      itemStyle: {
        normal: {
          color: '#ffffff', // 拐点的颜色
          borderColor: '#0047F5', // 拐点边框颜色
          borderWidth: 2, // 拐点边框大小
        },
      },
      lineStyle: {
        normal: {
          width: 3,
          color: '#0047F5', // 折线点的颜色
        },
      },
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 6,

    },
    {
      name: '政企部',
      data: [5, 10, 20, 30, 5, 10, 20, 30, 5, 10, 20, 30],
      color: '#4DB156',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#ffffff', // 拐点的颜色
          borderColor: '#4DB156', // 拐点边框颜色
          borderWidth: 2, // 拐点边框大小
        },
      },
      lineStyle: {
        normal: {
          width: 3,
          color: '#4DB156', // 折线点的颜色
        },
      },
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 6,

    },
    ],
  }
})

let color = ['#42E0E0', '#42A2E1', '#2C57F0', '#F3F3F4', '#869CAF'];
let echartData = [
  {
    name: '统计抽样调查',
    value: 3720,
  },
  {
    name: '住宿床位普查',
    value: 2920,
  },
  {
    name: '统计平台系统',
    value: 2200,
  },
  {
    name: '你学法我送票',
    value: 1420,
  },
  {
    name: '其他类型项目',
    value: 1420,
  },
];
let formatNumber = function (num) {
  let reg = /(?=(\B)(\d{3})+$)/g;
  return num.toString().replace(reg, ',');
};
let option2 = computed(() => {
  return {
    color: color,
    tooltip: {
      trigger: 'item',
      backgroundColor: "rgba(0,0,0,0.5)",
      borderWidth: "1", //边框宽度设置1
      borderColor: "rgba(0,0,0,0)", //设置边框颜色
      formatter: function (params) {
        var res = ``
        res = `<div style='color:#fff'>${params.name} <br/><div style='display:flex;align-items: center;'>  <div style='background:${params.color};width:15px;height:15px;border-radius:15px;margin-right: 10px;'></div>  ${params.value} (${params.percent} %)</div> </div>`
        return res
      }
    },
    title: [
      {
        text: '设备数',
        x: '27%',
        top: '40%',
        textStyle: {
          color: '#fff',
          fontSize: 12,
          fontFamily: 'DingTalk-JinBuTi',
        },
      },
      {
        text: '125',
        x: '24%',
        top: '50%',
        textStyle: {
          fontSize: 18,
          color: '#ffffff',
          fontFamily: 'DingTalk-JinBuTi',
        },
      },
      {
        text: '(万元)',
        x: '32%',
        top: '52%',
        textStyle: {
          fontSize: 10,
          color: '#7B92A4',
          fontFamily: 'DingTalk-JinBuTi',
        },
      },
    ],
    polar: {
      radius: ['44%', '50%'],
      center: ['50%', '50%'],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    legend: {
      orient: 'vertical', // 垂直排列
      right: 0, // 距离右侧的距离
      top: 'middle', // 垂直居中
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 30,
      textStyle: {
        color: '##839AAA', // 图例文字的颜色
        fontSize: 14, // 图例文字的字体大小
        fontFamily: 'DingTalk-JinBuTi',
        fontWeight: '300'
      },
      formatter: function (name) {
        let data = echartData;
        let total = 0;
        let tarValue = 0;
        for (let i = 0, l = data.length; i < l; i++) {
          total += data[i].value;
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }
        let p = (tarValue / total * 100).toFixed(2);
        return name + ' ' + '    |    ' + p + '%';
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['55%', '67%'],
        center: ['32%', '50%'],
        data: echartData,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            color: function (colors) {
              return color[colors.dataIndex];
            }
          }
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{c}',
          color: '#ffffff',
          fontSize: 14,
          textStyle: {
            fontFamily: 'DingTalk-JinBuTi',
          }
          // 你可以添加更多的样式属性，比如 fontWeight, fontStyle 等
        }
      },

    ],
  };
})
const dataArr = 95.85
const dataX = 100
const options3 = computed(() => {
  return {
    backgroundStyle: {
      borderWidth: 1,
      color: 'transparent'
    },
    title: [
      {
        text: `${dataArr} %`,
        bottom: '3%',
        left: 'center',
        textStyle: {
          fontSize: '20',
          color: '#44EBEA',
          fontFamily: 'DingTalk-JinBuTi',
        },
        triggerEvent: true
      }
    ],

    legend: {
      show: false
    },
    series: [
      {
        name: '最外部进度条',
        type: 'gauge',
        radius: '94%',
        splitNumber: 1,
        axisLine: {
          lineStyle: {
            color: [
              [
                dataArr / dataX,
                {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0.5,
                  y2: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#11233D' // 0% 处的颜色
                    },

                    {
                      offset: 1,
                      color: '#1D3C93' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              ],
              [1, '#083158']
            ],
            width: 2
          }
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        itemStyle: {
          show: false
        },
        detail: {
          show: false
        },
        title: {
          // 标题
          show: false
        },
        data: [
          {
            name: 'title',
            value: dataArr
          }
        ],
        pointer: {
          show: false
        },
        animationDuration: 4000
      },

      {
        name: '刻度尺',
        type: 'gauge',
        radius: '110%',
        splitNumber: 5, // 刻度数量
        min: 0, // 最小刻度
        max: dataX, // 最大刻度
        // 仪表盘轴线相关配置
        axisLine: {
          show: false
        },
        // 分隔线
        splitLine: {
          show: true,
          length: 25,
          lineStyle: {
            width: 2,
            color: '#12E5FE'
          }
        },
        // 刻度线
        axisTick: {
          show: true,
          splitNumber: 20,
          length: 10,
          lineStyle: {
            color: '#23A2CF',
            width: 1,
          },
        },
        // 刻度标签
        axisLabel: {
          distance: 10,
          color: '#6C8C93',
          fontSize: '10',
          fontFamily: "DingTalk-JinBuTi",
          formatter: function (e) {
            return e + '%'
          }
        },
        detail: {
          show: false
        }
      },

      {
        name: '刻度尺',
        type: 'gauge',
        radius: '100%',
        splitNumber: 5, // 刻度数量
        min: 0, // 最小刻度
        max: dataX, // 最大刻度
        // 仪表盘轴线相关配置
        axisLine: {
          show: false
        },
        // 分隔线
        splitLine: {
          show: false
        },
        // 刻度线
        axisTick: {
          show: true,
          splitNumber: 20,
          length: 5,
          lineStyle: {
            color: '#055B88',
            width: 1,
          },
        },
        // 刻度标签
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        }
      },

      {
        name: '刻度尺',
        type: 'gauge',
        radius: '100%',
        splitNumber: 5, // 刻度数量
        min: 0, // 最小刻度
        max: dataX, // 最大刻度
        // 仪表盘轴线相关配置
        axisLine: {
          show: false
        },
        // 分隔线
        splitLine: {
          show: false
        },
        // 刻度线
        axisTick: {
          show: true,
          splitNumber: 20,
          length: 30,
          lineStyle: {
            color: '#055B88',
            width: 1,
          },
        },
        // 刻度标签
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        }
      },
      {
        name: '外部指针',
        type: 'gauge',
        radius: '92%',
        axisLine: {
          lineStyle: {
            color: [
              [dataArr / dataX - 0.001, 'rgba(0,0,0,0)'],
              [dataArr / dataX + 0.003, '#e43c59'],
              [1, 'rgba(0,0,0,0)']
            ],
            width: 1
          }
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        itemStyle: {
          show: false
        },
        detail: {
          show: false
        },
        title: {
          // 标题
          show: false
        },
        data: [
          {
            name: 'title',
            value: dataArr
          }
        ],
        pointer: {
          show: false
        }
      },

      {
        name: '内层带指针',
        type: 'gauge',
        radius: '77%',
        splitNumber: 10, // 刻度数量
        min: 0, // 最小刻度
        max: dataX, // 最大刻度
        // 仪表盘轴线相关配置
        axisLine: {
          lineStyle: {
            color: [
              [
                1,
                {
                  type: 'radial',
                  x: 0.5,
                  y: 0.59,
                  r: 0.6,
                  colorStops: [
                    {
                      offset: 0.72,
                      color: '#032046'
                    },
                    {
                      offset: 0.94,
                      color: '#086989'
                    },
                    {
                      offset: 0.98,
                      color: '#0FAFCB'
                    },
                    {
                      offset: 1,
                      color: '#0EA4C1'
                    }
                  ]
                }
              ]
            ],
            width: 1
          }
        },
        // 分隔线
        splitLine: {
          show: false
        },
        // 刻度线
        axisTick: {
          show: false,

        },
        // 刻度标签
        axisLabel: {
          show: false
        },
        // 仪表盘指针
        pointer: {
          show: true,
          length: '95%',
          width: 5 // 指针粗细
        },
        // 仪表盘指针样式
        itemStyle: {
          color: '#01eaf8'
        },
        data: [
          {
            value: dataArr
          }
        ],
        detail: {
          show: false
        }
      },

      // 中间半圆装饰
      {
        type: 'gauge',
        radius: '130%', // 大小
        center: ['50%', '140%'],
        axisLine: {
          show: true,
          lineStyle: {
            // 轴线样式
            width: 2, // 宽度
            color: [
              [
                1,
                {
                  type: 'radial',
                  x: 0.5,
                  y: 0,
                  r: 0.6,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#244D6A' // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: '#101C24' // 100% 处的颜色
                    }
                  ]
                }
              ]
            ]
          }
        },
        axisTick: {
          // 刻度
          show: false
        },
        splitLine: {
          // 分割线
          show: false
        },
        axisLabel: {
          // 刻度标签
          show: false
        },
        pointer: {
          // 仪表盘指针
          show: false
        },
        detail: {
          // 仪表盘详情
          show: false
        }
      }
    ]
  };
})
const data4 = ref([{ name: '微信小程序', value: 10 }, { name: '邮政团购', value: 20 }, { name: '建行生活', value: 30 }, { name: '抖音来客', value: 40 }, { name: '其他渠道', value: 40 }])
const options4 = computed(() => {
  return {

    xAxis: [
      {
        show: false,

      },

    ],
    yAxis: [
      {
        show: false,
        type: 'category',
      },
    ],
    legend: {
      data: ['微信小程序', '邮政团购', '建行生活', '抖音来客', '其他渠道'],
      orient: 'horizontal', // 水平排列垂直排列
      top: 80, // 垂直居中
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 10,
      textStyle: {
        color: '#839AAA', // 图例文字的颜色
        fontSize: 12, // 图例文字的字体大小
        fontFamily: 'DingTalk-JinBuTi',
        fontWeight: '300'
      },
      formatter: function (name) {
        let data = data4.value;
        let total = 0;
        let tarValue = 0;
        for (let i = 0, l = data.length; i < l; i++) {
          total += data[i].value;
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }
        let p = (tarValue / total * 100).toFixed(2);
        return name + ' ' + '    |    ' + p + '%';
      }
    },
    grid: {
      left: '-10%',
      right: '-15%',
      bottom: '50%',
      top: '0%',
      containLabel: true,
    },
    series: [
      {
        name: '微信小程序',
        type: 'bar',
        stack: 'total',
        data: [5],
        barWidth: 18,
        yAxisIndex: 0,
        itemStyle: {
          color: '#2C57F0',
          // color: function(params) {
          //     // 构建条纹颜色渐变
          //     return new proxy.$echarts.graphic.LinearGradient(
          //         0, 0, 0, 1, // 渐变方向从上到下
          //         [
          //             {offset: 0, color: '#718EF5'},   // 柱图顶部颜色
          //             {offset: 0.5, color: '#7994F5'}, // 柱图中间颜色
          //             {offset: 1, color: '#6E8BF4'}    // 柱图底部颜色
          //         ]
          //     );
          // }
        }
      },
      {
        name: '邮政团购',
        type: 'bar',
        stack: 'total',
        data: [3],
        barWidth: 18,
        yAxisIndex: 0,
        itemStyle: {
          color: '#6A89F4'
        }
      },
      {
        name: '建行生活',
        type: 'bar',
        stack: 'total',
        data: [3],
        barWidth: 18,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: '#44EBEA',
          },
        },
      },
      {
        name: '抖音来客',
        type: 'bar',
        stack: 'total',
        data: [10],
        barWidth: 18,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: '#ffffff',
          },
        },
      },
      {
        name: '其他渠道',
        type: 'bar',
        stack: 'total',
        data: [5],
        barWidth: 18,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: '#EFDE45',
          },
        },
      },
    ],
    aria: {
      enabled: true,
      decal: {
        show: true,
        decals: [
          {
            color: '#809AF4',
            dashArrayX: [3, 0],
            dashArrayY: [3, 3],
            rotation: -Math.PI / 4
          },
        ]
      }
    }
  }
})
var data5 = [50, 60, 70, 20, 30];
var className = ['湘西旅游...', '初心源旅...', '省卡', '郴州卡', '其他产品'];
var colorList = ['#2D5BFB', '#44A9EB', '#44EBEA', '#8CA3B6', '#FFFFFF'];
var defaultData = [100, 100, 100, 100, 100, 100];
const options5 = computed(() => {
  return {

    grid: {
      left: '0%',
      right: '5%',
      bottom: '0%',
      top: '0%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      color: "black",
      backgroundColor: "rgba(0,0,0,0.5)",
      borderWidth: "1", //边框宽度设置1
      borderColor: "rgba(0,0,0,0)", //设置边框颜色
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        return '<div style=color:#fff;font-family:DingTalk-JinBuTi>' + params[0].axisValue + '<br/>' +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
          params[0].value + '万' + '</div>'
      }
    },

    xAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: [{
      type: 'category',
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#8CA3B6',
          fontFamily: 'DingTalk-JinBuTi',
        },
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: true
      },
      axisLine: {
        show: true
      },
      data: className
    }],
    series: [{
      name: '完成率',
      type: 'bar',
      zlevel: 1,
      itemStyle: {
        normal: {
          barBorderRadius: 0,
          // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          //     offset: 0,
          //     color: 'rgb(57,89,255,1)'
          // }, {
          //     offset: 1,
          //     color: 'rgb(46,200,207,1)'
          // }]),
          color: (params) => {
            return colorList[params.dataIndex]
          }
        },
      },
      label: {
        show: true,
        position: 'right',
        distance: 10,
        fontSize: 12,
        fontFamily: 'DingTalk-JinBuTi',
        color: '#ffffff',
        zlevel: 4,
        z: 10,
        formatter: '{c}'
      },
      barWidth: 14,
      data: data5
    }
    ]
  };
})

const options6 = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      color: "black",
      backgroundColor: "rgba(0,0,0,0.5)",
      borderWidth: "1", //边框宽度设置1
      borderColor: "rgba(0,0,0,0)", //设置边框颜色
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        console.log(params)
        return '<div style=color:#fff;font-family:DingTalk-JinBuTi>' + params[0].name + '<br/>' +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2D5BFB'></span>" +
          params[0].seriesName + '：' + params[0].value + '万' + "<br/><span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#44EBEA'></span>" +
          params[1].seriesName + '：' + params[1].value + '万' + '</div>'
      }
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '15%',
      containLabel: true
    },
    legend: {
      data: ['个人', '单位'],
      top: "0%",
      right: "0%",
      textStyle: {
        fontFamily: 'DingTalk-JinBuTi',
        fontWeight: 300,
        fontSize: 12,
        color: '#B3B3B3'
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: {
        lineStyle: {
          color: '#8c9493'
        }
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: 'DingTalk-JinBuTi',
          fontWeight: 300,
          fontSize: 12
        }
      },
    },

    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
        lineStyle: {
          color: '#8c9493'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#999999',
          type: 'dashed',
        },
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'DingTalk-JinBuTi',
          fontWeight: 300,
          fontSize: 12
        }
      }
    },
    series: [{
      name: '个人',
      type: 'bar',
      barWidth: '25%',
      itemStyle: {
        normal: {
          color: '#2D5BFB'
        },
      },
      data: [10, 30, 40, 120, 50, 90, 60, 40, 15, 60, 30, 15]
    },
    {
      name: '单位',
      type: 'bar',
      barWidth: '25%',
      itemStyle: {
        normal: {
          color: '#44EBEA'
        }

      },
      data: [5, 40, 60, 110, 40, 100, 70, 50, 20, 110, 40, 10]
    }
    ]
  };
})

const options7 = computed(() => {
  return {
    legend: {
      icon: 'rect',
      top: '0%',
      right: '0%',
      itemWidth:20,
      itemHeight:3,
      itemGap: 20,
      textStyle: {
        fontFamily: 'DingTalk-JinBuTi',
        fontWeight: 300,
        fontSize: 12,
        color: '#B3B3B3'
      },
    },
    tooltip: {
      trigger: 'axis',
      color: "black",
      backgroundColor: "rgba(0,0,0,0.5)",
      borderWidth: "1", //边框宽度设置1
      borderColor: "rgba(0,0,0,0)", //设置边框颜色
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        console.log(params)
        return '<div style=color:#fff;font-family:DingTalk-JinBuTi>' + params[0].name + '<br/>' +
          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2D5BFB'></span>" +
          params[0].seriesName + '：' + params[0].value + '万' + "<br/><span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#44EBEA'></span>" +
          params[1].seriesName + '：' + params[1].value + '万' + '</div>'
      }
    },
    grid: {
      top: '10%',
      bottom: '15%',
      left: '5%',
      right: '5%',
    },
    xAxis: [{
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          fontFamily: 'DingTalk-JinBuTi',
          fontWeight: 300,
          fontSize: 12
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15
      },
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'DingTalk-JinBuTi',
          fontWeight: 300,
          fontSize: 12
        }
      },
      splitLine: {
        show: false
      }
    }],
    series: [{
      name: '自营',
      type: 'line',
      data: [10, 10, 30, 12, 15, 3, 7,5, 12, 11, 14, 25],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      itemStyle: {
        normal: {
          color: colorList[0],
          borderColor: colorList[0]
        }
      }
    }, {
      name: '渠道',
      type: 'line',
      data: [5, 12, 11, 14, 25, 16, 10,5, 12, 11, 14, 25],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      itemStyle: {
        normal: {
          color: colorList[1],
          borderColor: colorList[1]
        }
      }
    }
    ]
  };
})
onMounted(() => {

  nextTick(() => {
    // changesizeFn()
  })
  // 定时更新数据 每一秒更新一次数据

  setInterval(() => {
    data.value = data.value.map(item => ({
      ...item,
      value: Math.random() * 100,  //Math()随机函数，这里是随机生成100以内的数字
    }))
  }, 1000000)  //单位ms，1000ms即是1秒

  // let myChart = proxy.$echarts.getInstanceByDom(document.getElementById('chart'));
  // let myChart1 = proxy.$echarts.getInstanceByDom(document.getElementById('chart1'));
  // let myChart2 = proxy.$echarts.getInstanceByDom(document.getElementById('chart2'));
  // let myChart3 = proxy.$echarts.getInstanceByDom(document.getElementById('chart3'));
  // window.addEventListener('resize', function () {//执行
  //   myChart.resize();
  //   myChart1.resize();
  //   myChart2.resize();
  //   myChart3.resize();
  // })
})




</script>

<template>
  <v-scale-screen width="1920" height="1080" :autoScale="{ x: true, y: true }">
    <div class='body_rq'>
      <img class="first_header" src="../assets/first_top_bj.png">
      <div class="first_middle">
        <div class="first_middle_left">
          <img src="../assets/first_qnjysj.png" class="first_middle_left_img">
          <img src="../assets/first_zdzb.png" class="first_middle_left_zdzb">
          <div class="first_middle_left_zdzb_rq">
            <div class='first_middle_left_zdzb_yye'>
              <span class="first_middle_left_zdzb_yye_text" style="display: block;">营业额</span>
              <div class="first_middle_left_zdzb_yye_data">7,617,287 <span class="first_middle_left_zdzb_yye_text"
                  style="margin-left: 10px;">元</span></div>
              <div class="first_middle_left_zdzb_yye_tb"> <span class="first_middle_left_zdzb_yye_text">同比</span>
                <img src="../assets/first_yye_zz.png" class="first_middle_left_zdzb_yye_tb_img">
                <span class="first_middle_left_zdzb_yye_text" style="color: #44EBEA;margin-left: 0vw;">12%</span>
              </div>
            </div>

            <div class='first_middle_left_zdzb_yhl'>
              <span class="first_middle_left_zdzb_yye_text" style="display: block;">用户量</span>
              <div class="first_middle_left_zdzb_yye_data">7,617,287 <span class="first_middle_left_zdzb_yye_text"
                  style="margin-left: 10px;">元</span></div>
              <div class="first_middle_left_zdzb_yye_tb"> <span class="first_middle_left_zdzb_yye_text">同比</span>
                <img src="../assets/first_yye_zz.png" class="first_middle_left_zdzb_yye_tb_img">
                <span class="first_middle_left_zdzb_yye_text" style="color: #44EBEA;margin-left: 0vw;">12%</span>
              </div>
            </div>
            <div class='first_middle_left_zdzb_hzs'>
              <span class="first_middle_left_zdzb_yye_text" style="display: block;">合作商</span>
              <div class="first_middle_left_zdzb_yye_data">7,617,287 <span class="first_middle_left_zdzb_yye_text"
                  style="margin-left: 10px;">元</span></div>
              <div class="first_middle_left_zdzb_yye_tb"> <span class="first_middle_left_zdzb_yye_text">同比</span>
                <img src="../assets/first_yye_xj.png" class="first_middle_left_zdzb_yye_tb_img">
                <span class="first_middle_left_zdzb_yye_text" style="color: #EFBB65;margin-left: 0vw;">12%</span>
              </div>
            </div>
            <div class='first_middle_left_zdzb_xms'>
              <span class="first_middle_left_zdzb_yye_text" style="display: block;">项目数</span>
              <div class="first_middle_left_zdzb_yye_data">7,617,287 <span class="first_middle_left_zdzb_yye_text"
                  style="margin-left: 10px;">元</span></div>
              <div class="first_middle_left_zdzb_yye_tb"> <span class="first_middle_left_zdzb_yye_text">同比</span>
                <img src="../assets/first_yye_cp.png" class="first_middle_left_zdzb_yye_tb_img">
                <span class="first_middle_left_zdzb_yye_text" style="color: #029DCD;margin-left: 0vw;">0%</span>
              </div>
            </div>
          </div>
          <img src="../assets/first_mbwcqk.png" class="first_middle_left_zdzb" style="margin-top: 1vh;">
          <div class="first_middle_left_wcmbqk_rq">
            <div class="first_middle_left_wcmbqk_one">
              <div class="first_zypt">617.3<span style="color: #7B92A4;font-size: 12px;">(万元)</span></div>
              <div class="first_xmje">617.3<span style="color: #7B92A4;font-size: 12px;">(万元)</span></div>
              <div class="first_dsfqd">617.3<span style="color: #7B92A4;font-size: 12px;">(万元)</span></div>
              <e-charts id="chart" :option="option" />
            </div>
            <div class="first_left_glyye">
              <img src="../assets/first_glyye.png" style="width: 136px;height: 199px;margin-top: 9px;">
              <div class="first_left_nr_rq">
                <div style="color: #839AAA;font-size: 12px;">旅游卡营业额</div>
                <div style="color: #44A9EB;font-size: 26px;margin-top: 15px;">593.2<span
                    style="font-size: 12px;#7B92A4">(万元)</span></div>
                <div style="color: #839AAA;font-size: 12px;margin-top: 20px;">实体商品营业额</div>
                <div style="color: #ffffff;font-size: 26px;margin-top: 15px;">13.2<span
                    style="font-size: 12px;#7B92A4">(万元)</span></div>
                <div style="color: #839AAA;font-size: 12px;margin-top: 20px;">其他类营业额</div>
                <div style="color: #ffffff;font-size: 26px;margin-top: 15px;">1.9<span
                    style="font-size: 12px;#7B92A4">(万元)</span></div>
              </div>
            </div>
            <div class="first_left_zxt">
              <e-charts id="chart1" :option="option1" />
            </div>

          </div>
          <img src="../assets/first_zqxmsj.png" class="first_middle_left_img">
          <div class="first_left_bottom_rq">
            <e-charts id="chart2" :option="option2" />
            <div class="first_left_zxxt_rq">
              <div class="first_left_zxhd">
                <div class="first_left_zxhd_title">执行活动</div>
                <div class="first_left_zxhd_data">367.19<span>万</span></div>
                <div class="first_left_zxhd_rq">
                  <span>同比</span>
                  <img src="../assets/first_yye_zz.png" style="margin: 0px 5px;width: 16px;height: 12px;"
                    class="first_middle_left_zdzb_yye_tb_img">
                  <span style="color: #029DCD;">22%</span>
                </div>
              </div>
              <div class="first_left_xtpg">
                <div class="first_left_zxhd_title">系统平台</div>
                <div class="first_left_zxhd_data">97.6<span>万</span></div>
                <div class="first_left_zxhd_rq">
                  <span>同比</span>
                  <img src="../assets/first_yye_zz.png" style="margin: 0px 5px;width: 16px;height: 12px;"
                    class="first_middle_left_zdzb_yye_tb_img">
                  <span style="color: #EFBB65;">22%</span>
                </div>
              </div>
            </div>

            <div class="first_left_tb_rq">
              <div style="position: absolute;right: 0px;"><el-date-picker popper-class="date-popper" :teleported="false"
                  v-model="value5" type="month" placeholder="月份选择" /></div>
              <div class="first_left_tb_rq_nr">
                <div class="table-wrap">
                  <div class="titleContent">
                    <div class="tit" style="width: 40px;">排名</div>
                    <div class="tit" style="width: 171px;margin-left: 25px;">名称</div>
                    <div class="tit" style="width: 81px;">金额(万）</div>
                    <div class="tit" style="width: 73px;">进度</div>
                    <div class="tit" style="width: 88px;">需协调</div>
                  </div>
                  <vue3-seamless-scroll :list="periodDataList" class="scroll" direction="up" :step="0.9" :hover="true"
                    :limit-scroll-num="7" :is-watch="true" :single-height="34" :single-width="0"
                    :single-wait-time="3000" :wheel="false">
                    <div class="countContent"
                      :style="{ background: i == 0 ? 'linear-gradient(to right,#D54B4333, #D54B4300)' : i == 1 ? 'linear-gradient(to right,#D5734333, #D5734300)' : i == 2 ? 'linear-gradient(to right,#D59B4333, #D59B4300)' : 'linear-gradient(to right,#2F384033, #2F384000)' }"
                      v-for="(item, i) in periodDataList" :key="i">
                      <div class="descr1"
                        :style="{ backgroundColor: i == 0 ? '#D54B43' : i == 1 ? '#D57343' : i == 2 ? '#D59B43' : '#2F3840' }">
                        {{ i + 1 }}</div>
                      <div class="descr2">{{ item.startTime }}</div>
                      <div class="descr3">{{ item.dateTime }}</div>
                      <div class="descr4">100%</div>
                      <div class="descr5">已签合同</div>
                    </div>

                  </vue3-seamless-scroll>
                </div>


              </div>
            </div>
          </div>

        </div>
        <div class="first_middle_right">
          <img src="../assets/first_rigth_scptsj.png" class="first_middle_left_img">
          <img src="../assets/first_right_ztyjzb.png" class="first_middle_left_zdzb" style="width: 510px;">
          <div class="first_middle_right_top">
            <e-charts id="chart3" :option="options3" />
            <div class="first_middle_right_r_rq">
              <div class="first_middle_right_r_rq1">
                <span style="color: #839AAA;">整体业绩</span>
                <div style="position: absolute;left: 0px;bottom: 0px;display: flex;align-items: center;">
                  <span style="color: #839AAA;">同比</span>
                  <img src="../assets/first_yye_cp.png" class="first_middle_left_zdzb_yye_tb_img1">
                  <span style="color: #029DCD;">22%</span>
                </div>
                <div style="color: #fff;font-size: 22px;position: absolute;right: 0px;bottom: 0px;">367.19<span
                    style="color: #7B92A4;font-size: 12px;">万</span></div>
              </div>

              <e-charts id="chart4" :option="options4" />
            </div>
          </div>
          <img src="../assets/first_zycpsj.png" class="first_middle_left_zdzb" style="width: 510px;">
          <e-charts id="chart5" :option="options5"></e-charts>
          <img src="../assets/first_right_yjmbsj.png" class="first_middle_left_zdzb" style="width: 510px;">
          <e-charts id="chart6" :option="options6"></e-charts>
          <img src="../assets/first_right_qdyysj.png" class="first_middle_left_zdzb" style="width: 510px;">
          <e-charts id="chart7" :option="options7"></e-charts>
        </div>
      </div>
      <img src="../assets/first_button_bj.png" class="first_button">
      <!-- <div class="div1">
    <e-charts id="chart" :option="option" />
    <e-charts id="chart1" :option="option" />
  </div>
  <div class="div1">
    <e-charts id="chart2" :option="option" />
    <e-charts id="chart3" :option="option" />
  </div> -->
    </div>
  </v-scale-screen>
</template>

<style scoped>
@media only screen and (min-width: 601px) {
  .first_middle_right_r_rq {
    width: 339px;
    height: 177px;
    margin-left: 16px;

    .first_middle_right_r_rq1 {
      width: 339px;
      height: 44px;
      font-size: 12px;
      display: flex;
      align-items: center;
      position: relative;
    }
  }

  .table-wrap {
    width: 100%;
    color: #8CA3B6;

  }

  .scroll {
    max-height: 210px;
    height: 210px;
    overflow: hidden;
  }

  .titleContent {
    display: flex;
    align-items: flex-start;
    height: 35px;
    border-bottom: 3px solid #7B92A4;

    .tit {
      text-align: left;
    }
  }

  .countContent {
    display: flex;
    width: 100%;
    font-size: 14px;
    margin-top: 8px;
    height: 26px;

    .descr1 {
      text-align: center;
      width: 30px;
      height: 26px;
      line-height: 28px;
      color: #fff;
    }

    .descr2 {
      text-align: left;
      width: 116px;
      height: 26px;
      line-height: 28px;
      color: #fff;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 1;
      margin-left: 30px;
      margin-right: 55px;
    }

    .descr3 {
      color: #fff;
      width: 81px;
      height: 26px;
      line-height: 26px;
    }

    .descr4 {
      width: 73px;
      color: #fff;
      line-height: 26px;
      height: 26px;
    }

    .descr5 {
      width: 88px;
      color: #fff;
      line-height: 26px;
      height: 26px;
    }
  }




  :deep(.el-picker__popper.el-popper) {
    background-color: rgba(43, 43, 43, 0.7);
    border: 1px solid #808080;
  }

  .date-popper {
    background: transparent !important;
  }

  :deep(.el-date-picker) {
    background: transparent !important;
    /* --el-datepicker-text-color: #fff; */
    --el-datepicker-off-text-color: rgba(175, 175, 175, 0.7);
    --el-datepicker-header-text-color: #fff;
    --el-datepicker-active-color: #8CA3B6;
    --el-datepicker-hover-text-color: #8CA3B6;
    --el-datepicker-icon-color: rgba(255, 255, 255, 0.7);
  }

  :deep(.el-picker-panel__body-wrapper) {
    background: transparent !important;
  }

  :deep(.el-picker-panel__body) {
    background: transparent !important;

  }

  /* 当天颜色 */
  :deep(.el-date-table td.today .el-date-table-cell__text) {
    color: #8CA3B6;
  }

  /* 标题颜色 */
  :deep(.el-date-picker__header-label) {
    color: #fff;
  }

  /* 当月日期颜色 */
  :deep(.el-date-table__row .available) {
    color: #8CA3B6;
  }

  /* 小菱形颜色 */
  :deep(.el-picker__popper.el-popper[data-popper-placement^=top] .el-popper__arrow:before) {
    background-color: rgba(43, 43, 43, 0.9);

  }

  :deep(.el-input__wrapper) {
    background: #232E36;
    box-shadow: 0 0 0 1px #334044 !important;
    font-family: DingTalk-JinBuTi !important;
  }

  :deep(.el-input__inner) {
    color: #8CA3B6 !important;
    font-family: DingTalk-JinBuTi !important;
  }

  :deep(.el-input__prefix) {
    display: none;
  }

  :deep(.el-input__inner::-webkit-input-placeholder) {
    color: #8CA3B6;
    /* 自定义颜色，例如灰色 */
  }

  :deep(.el-input__inner:-moz-placeholder) {
    color: #8CA3B6;
    /* For Firefox 18- */
  }

  :deep(.el-input__inner::-moz-placeholder) {
    color: #8CA3B6;
    /* For Firefox 19+ */
  }

  :deep(.el-input__inner:-ms-input-placeholder) {
    color: #8CA3B6;
    /* For Internet Explorer 10+ */
  }

  .first_left_tb_rq {
    width: 465px;
    height: 270px;
    margin-left: 51px;
    margin-top: -30px;
    position: relative;
  }

  .first_left_tb_rq_nr {
    width: 465px;
    height: 220px;
    position: absolute;
    bottom: 5px;
  }

  .first_left_bottom_rq {
    width: 1270px;
    height: 250px;
    display: flex;
  }

  .first_left_zxt {
    width: 649px;
    height: 255px;
    margin-left: 23px;
    margin-top: 22px;
  }

  .first_left_zxxt_rq {
    width: 203px;
    height: 237px;
    margin-left: 47px;
    margin-top: 12px;
  }

  .first_left_zxhd {
    background-image: url('../assets/first_zdzb_xms.png');
    background-size: 100% 100%;
    width: 203px;
    height: 99px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }

  .first_left_zxhd_title {
    color: #839AAA;
    font-size: 14px;
    margin-left: 23px;
  }

  .first_left_zxhd_data {
    display: flex;
    color: #fff;
    font-size: 22px;
    margin-left: 23px;
  }

  .first_left_zxhd_rq {
    margin-left: 23px;
    font-size: 14px;
    color: #8CA3B6;
    display: flex;
    align-items: center;
  }

  .first_left_xtpg {
    background-image: url('../assets/first_zdzb_hzs.png');
    background-size: 100% 100%;
    width: 203px;
    height: 99px;
    margin-top: 39px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }

  .first_left_glyye {
    width: 160px;
    height: 217px;
    margin-top: 43px;
    margin-left: 71px;
    position: relative;

  }

  .first_left_nr_rq {
    width: 104px;
    position: absolute;
    left: 56px;
    top: 0px;
    height: 217px;
  }

  .body_rq {
    width: 100%;
    height: 100%;
    background-image: url('../assets/first_bj.png');
    background-size: 100% 100%;

  }

  .first_zypt {
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 43px;
    left: 131px;
    font-family: DingTalk-JinBuTi;
  }

  .first_xmje {
    color: #fff;
    font-size: 20px;
    position: absolute;
    bottom: 33px;
    left: 27px;
    font-family: DingTalk-JinBuTi;
  }

  .first_dsfqd {
    color: #fff;
    font-size: 20px;
    position: absolute;
    bottom: 26px;
    left: 242px;
    font-family: DingTalk-JinBuTi;

  }

  .first_middle_left_zdzb_yye_tb_img {
    width: 25px;
    margin: 0 1vw;
  }

  .first_middle_left_zdzb_yye_tb_img1 {
    width: 20px;
    margin: 0 5px;
  }

  .first_middle_left_zdzb_yye_tb {
    margin-top: 15px;
    display: flex;
    align-items: center;
  }

  .first_middle_left_zdzb_yye_text {
    font-size: 18px;
    color: #839AAA;
    font-family: DingTalk-JinBuTi;
    margin-left: 32px;
  }

  .first_middle_left_zdzb_yye_data {
    font-size: 33px;
    font-family: DingTalk-JinBuTi;
    margin-left: 32px;
    margin-top: 15px;
    color: #fff;
  }

  .first_middle_left_zdzb {
    width: 1274px;
  }

  .first_middle_left_zdzb_yye {
    background-image: url('../assets/first_zdzb_yye.png');
    background-size: 100% 100%;
    width: 306px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .first_middle_left_zdzb_yhl {
    background-image: url('../assets/first_zdzb_yhl.png');
    background-size: 100% 100%;
    width: 306px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .first_middle_left_zdzb_hzs {
    background-image: url('../assets/first_zdzb_hzs.png');
    background-size: 100% 100%;
    width: 306px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .first_middle_left_zdzb_xms {
    background-image: url('../assets/first_zdzb_xms.png');
    background-size: 100% 100%;
    width: 306px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .first_middle_left_zdzb_rq {
    width: 1274px;
    display: flex;
    gap: 14px;
    height: 150px;
    margin-top: 33px;
  }

  .first_middle_left_wcmbqk_rq {
    width: 1270px;
    display: flex;
    height: 291px;
  }

  .first_middle_left_wcmbqk_one {
    width: 367px;
    height: 282px;
    background-image: url('../assets/first_wcqk_one.png');
    background-size: 100% 100%;
    position: relative;
  }

  .first_header {
    width: 1920px;
  }

  .first_button {
    width: 1920px;
    position: absolute;
    bottom: 0px;
  }

  .first_middle {
    width: 1920px;
    display: flex;
  }

  .first_middle_left {
    width: 1274px;
    padding-left: 49px;
  }

  .first_middle_right {
    width: 510px;
    margin-left: 44px;

    .first_middle_right_top {
      width: 528px;
      margin-left: -18px;
      display: flex;
      height: 183px;
      align-items: center;
    }
  }

  .first_middle_left_img {
    width: 509px;
    height: 56px;
  }

  /* 针对桌面设备的样式 */
  .div1 {
    display: flex;
  }

  #chart {
    width: 84px;
    height: 84px;
    position: absolute;
    top: 112px;
    left: 142px;
  }

  #chart1 {
    width: 649px; 
    height: 255px;
  }

  #chart2 {
    width: 509px;
    height: 250px;
    margin-top: 10px;
  }

  #chart3 {
    width: 172px;
    height: 172px;
  }

  #chart4 {
    width: 344px;
    height: 200px;
  }

  #chart5 {
    width: 510px;
    height: 174px;
    margin-top: 5px;
  }

  #chart6 {
    width: 510px;
    height: 174px;
    margin-top: 5px;
  }

  #chart7 {
    width: 510px;
    height: 174px;
    margin-top: 5px;
  }
}

@media only screen and (max-width: 600px) {

  /* 针对手机的样式 */
  .div1 {
    display: flex;
    flex-direction: column;
  }

  #chart {
    width: 100vw;
    height: 50vh;
  }

  #chart1 {
    width: 100vw;
    height: 50vh;
  }

  #chart2 {
    width: 100vw;
    height: 50vh;
  }

  #chart3 {
    width: 100vw;
    height: 50vh;
  }

}
</style>